<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
body,html { width:100%; height:100%; margin:0;}
a { text-decoration:none; color:white;}
#mapDiv { height:100%; width:100%; }
#TButtonList { position:absolute; left:70px; top:5px; z-index:1100; }
#debug { position:absolute; left:70px; top:40px; z-index:1100; background:white; padding:5px; background-color:rgba(255,255,255,0.5); border-radius:10px;}
#copyright { position:absolute; right:0; bottom:0; z-index:1100; color:white;}
</style>
<title>台风路径</title>
</head>
<body>
<div id="mapDiv"></div>
<div id="TButtonList"></div>
<div id="debug"><input type="button" id="btnfb" value="<<"><input type="button" id="btnb" value="<"><input type="button" id="btnpause" value="||"><input type="button" id="btnf" value=">"><input type="button" id="btnff" value=">>"><br>时间：<label id="time"></label><br>经度：<label id="longitude"></label><br>纬度：<label id="latitude"></label><br>中心气压：<label id="atmos"></label>百帕<br>最大风速：<label id="speed_wind"></label>米/秒<br>移动速度：<label id="speed"></label>千米/小时<br>移动方向：<label id="direction"></label><br>半径：<label id="radius"></label></div>
<div id=copyright>&copy; 2018 <a href="http://typhoon.nmc.cn/mobile.html" target="_blank">中央气象台台风网</a> & 海天鹰版权所有</div>
<script src="http://api.tianditu.com/js/maps.js"></script>
<script>
var xmlhttp;
var c = 0, pl = 0;
var points, id, time, atmos, speed_wind, direction, speed, radius, r1, r2, r3, r4;
var markert, circle;
var t;
var itv1, itv2;
var ctx = "http://typhoon.nmc.cn/weatherservice";
function $id(s){ return document.getElementById(s); }

// XMLHttpRequest回调函数 https://www.cnblogs.com/soyo/p/6860345.html
function loadXMLDoc(url,cfunc){
	if (window.XMLHttpRequest) {
		// IE7+, Firefox, Chrome, Opera, Safari 代码
  		xmlhttp = new XMLHttpRequest();
  	} else {
   		// IE6, IE5 代码
  		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.onreadystatechange = cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}

function genTyphoonList(url){
	loadXMLDoc(url,function(data) {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {			
			//console.log(data);
			var s = xmlhttp.responseText;
			s = s.substring(s.indexOf('((')+2,s.lastIndexOf('))'));
			var typhoonList = JSON.parse(s).typhoonList;
			console.log(typhoonList);
            //$id("myDiv").innerHTML = s;
			for(i=0; i<typhoonList.length; i++){
				var button = document.createElement('button');
				button.id = typhoonList[i][0];
				button.textContent = typhoonList[i][2];
				$id('TButtonList').appendChild(button);
				$id(button.id).addEventListener('click',function(){
					drawTyphoon(ctx + "/typhoon/jsons/view_" + this.id);
				}, false);
			}
        }
    });
}
var url = "http://typhoon.nmc.cn/weatherservice/typhoon/jsons/list_default";
genTyphoonList(url);

function drawTyphoon(url){
	loadXMLDoc(url,function(data) {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			map.clearOverLays();
			var s = xmlhttp.responseText;
			var data = JSON.parse(s.substring(s.indexOf('(')+1,s.lastIndexOf(')')));
			console.log(data);
			var ts = data.typhoon;
			points = [];
			time = [];
			atmos = [];
			speed_wind = [];
			direction = [];
			speed = [];
			radius = [];
			r1 = [];
			r2 = [];
			r3 = [];
			r4 = [];
			pl = ts[8].length;
			for(var i=0; i<pl; i++){
				time[i] = ts[8][i][1];
				atmos[i] = ts[8][i][6];
				speed_wind[i] = ts[8][i][7];
				direction[i] = ts[8][i][8];
				speed[i] = ts[8][i][9];
				var ra = ts[8][i][10];
				if(ra.length == 0){
					r1[i] = 0;
					r2[i] = 0;
					r3[i] = 0;
					r4[i] = 0;
				}else{
					r1[i] = ra[0][1];
					r2[i] = ra[0][2];
					r3[i] = ra[0][3];
					r4[i] = ra[0][4];
				}
				radius[i] = 300000;				
				points.push(new TLngLat(ts[8][i][4], ts[8][i][5]));
				
				var icon = new TIcon("point.svg", new TSize(10,10), {anchor:new TPixel(6,10)});
		        var marker = new TMarker(points[i], {icon:icon});
        		map.addOverLay(marker);
				// 闭包
				(function(i){
					TEvent.addListener(marker,"click",function(p){
						c = i;
						markert.setLngLat(this.getLngLat());
            			$id("time").textContent = time[i];
						$id("longitude").textContent = this.getLngLat().getLng();
						$id("latitude").textContent = this.getLngLat().getLat();
						$id("atmos").textContent = atmos[i];
						$id("speed_wind").textContent = speed_wind[i];
						$id("direction").textContent = direction[c];
						$id("speed").textContent = speed[i];
						$id("radius").textContent = "东北" + r1[i] + "，东南" + r2[i] + "，西南"+ r3[i] + "，西北" + r4[i] + " KM";
						circle.setRadius(radius[i]);
						circle.setCenter(this.getLngLat());
        			});
				})(i);
			}
			//把点集合连成线
			var polyline = new TPolyline(points, { strokeColor:"orange", strokeWeight:2, strokeOpacity:1 });
			map.addOverLay(polyline);

			var icon = new TIcon("typhoon.svg", new TSize(20,20), {anchor:new TPixel(10,12)});
			markert = new TMarker(points[0], {icon:icon});
			map.addOverLay(markert);
				
			circle = new TCircle(points[0], radius[0], cr);
			map.addOverLay(circle);
        }
    });
}

var map = new TMap("mapDiv");
//允许鼠标双击地图放大
map.enableDoubleClickZoom()
//允许鼠标滚轮缩放地图
map.enableHandleMouseScroll();
//设置显示地图的中心点和级别
map.centerAndZoom(new TLngLat(112,26),4);
map.setMapType(TMAP_HYBRID_MAP);

//缩放平移控件
var config = {
	type : "TMAP_NAVIGATION_CONTROL_LARGE",   //缩放平移的显示类型
	anchor : "TMAP_ANCHOR_TOP_LEFT",          //缩放平移控件显示的位置
	offset : [0,0],                           //缩放平移控件的偏移值
	showZoomInfo : true                       //是否显示级别提示信息，true表示显示，false表示隐藏。
};
var control = new TNavigationControl(config);
map.addControl(control);

//地图类型控件
var control = new TMapTypeControl();
//将地图类型控件添加到地图上
map.addControl(control);
//设置地图类型控件在地图上显示的位置，默认为在右侧，注：将控件加载到map之后再做此配置
// control.setLeft(10);
// control.setTop(20);

//比例尺控件
var control = new TScaleControl();
map.addControl(control);

var cr = {	
	strokeWeight:"0px",		
	fillColor:"#FFFFFF",
	fillOpacity:0.5
};
	
//动画
function lastp(){ 
	if(c>0){
		c = c-1;
		markert.setLngLat(points[c]);
		circle.setRadius(radius[c]);
		circle.setCenter(points[c]);
		$id('time').textContent = time[c];
		$id('longitude').textContent = points[c].lng;
		$id('latitude').textContent = points[c].lat;
		$id("atmos").textContent = atmos[c];
		$id("speed_wind").textContent = speed_wind[c];
		$id("direction").textContent = direction[c];
		$id("speed").textContent = speed[c];
		$id("radius").textContent = "东北" + r1[c] + "，东南" + r2[c] + "，西南" + r3[c] + "，西北" + r4[c] + " KM";
	}else{
		clearInterval(itv1);
	}
}

$id('btnb').addEventListener('click',function(){
	clearInterval(itv1);
	clearInterval(itv2);
	$id('btnff').disabled = false;
	$id('btnfb').disabled = false;
	lastp();
}, false);

$id('btnfb').addEventListener('click',function(){
	this.disabled = true;
	$id('btnff').disabled = false;
	clearInterval(itv2);
	itv1 = setInterval("lastp()",1000);
}, false);

function nextp(){
	if(c < pl-1){
		c = c + 1;
		markert.setLngLat(points[c]);
		circle.setRadius(radius[c]);
		circle.setCenter(points[c]);
		$id('time').textContent = time[c];
		$id('longitude').textContent = points[c].lng;
		$id('latitude').textContent = points[c].lat;
		$id("atmos").textContent = atmos[c];
		$id("speed_wind").textContent = speed_wind[c];
		$id("direction").textContent = direction[c];
		$id("speed").textContent = speed[c];
		$id("radius").textContent = "东北" + r1[c] + "，东南" + r2[c] + "，西南" + r3[c] + "，西北" + r4[c] + " KM";
	}else{
		c = -1;
		clearInterval(itv2);
	}
}

$id('btnf').addEventListener('click',function(){
	clearInterval(itv1);
	clearInterval(itv2);
	$id('btnff').disabled = false;
	$id('btnfb').disabled = false;
	nextp(); 	
}, false);

$id('btnff').addEventListener('click',function(){
	this.disabled = true;
	$id('btnfb').disabled = false;
	clearInterval(itv1);
	itv2 = setInterval("nextp()",1000); 	
}, false);

$id('btnpause').addEventListener('click',function(){
	clearInterval(itv1);
	clearInterval(itv2);
	$id('btnff').disabled=false;
	$id('btnfb').disabled=false;
}, false);

</script>
</body>
</html>